<template>
    <div class="zy-content ">
        <!--查询条件-->
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.ContractNumber')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.contractNo" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.PurchasingOrderNumber')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.orderNo" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.EquipmentName')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.deviceName" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.PassStatus')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.arrivalStatus"
                        filterable clearable :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of statusList"
                          :value="item.id"
                          :key="index">{{ item.name }}
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.ConfirmingDate')}}</p>
              <div class="ipt">
                <DatePicker
                    :value="dateTimeRange"
                    type="daterange"
                    placement="bottom-end"
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="handleRangeChange"
                />
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Installation')}}</p>
              <div class="ipt">
                <Cascader
                    :data="orgList"
                    :transfer="true"
                    @on-change="handleCasChange"
                ></Cascader>
              </div>
            </div>
          </Col>
          <Col span="24">
            <div class="t-c">
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()"
                        v-if="checkBtnPermission.dmsArrivalCheckList">
                  {{$t('common.Query')}}
                </Button>
                <Button
                    class="reset-btn"
                    @click="changeNum()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
        <div class="list-layout mt16">
          <div class="btns clear">
            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button  @click="handleOutRecords">{{$t('maintenance.Export')}}</Button>
          </div>
          <!--表格-->
          <div class="tableContent">
            <Table ellipsis ref="selection" :columns="columns" :data="dataSource"
                   @on-selection-change="handleSelectionChange">
              <template slot-scope="{ row }" slot="arrivalStatus">
                <span v-if="row.arrivalStatus === 0">
                  🔵{{ $t('preliminary.ToBeConfirmed') }}
                </span>
                <span v-if="row.arrivalStatus === 2">
                  🟣{{ $t('preliminary.Confirmed') }}
                </span>
              </template>
              <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn"
                          v-if="checkBtnPermission.dmsArrivalCheckAddArrival && (row.arrivalStatus != 2)"
                          @click="sendClick(row)"><i class="iconfont zy-common-neirong"></i>{{$t('preliminary.Input')}}
                    </span>
                <span class="operationBtn" v-if="checkBtnPermission.dmsDeviceGetDwysLater" @click="lockClick(row)"><i class="iconfont zy-common-chakan"></i>{{$t('common.Check')}}</span>
              </template>
            </Table>
          </div>
          <!--分页-->
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" :selected="ids.length" />
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                  @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
          </div>
        </div>
        <!--录入-->
<!--        <add-acceptance-check-modal ref="addAcceptanceModal" @handleFresh="handleFresh"/>-->
        <!--到位结果-->
        <result-acceptance-check-modal ref="resultModal" @handleFresh="handleFresh"/>
        <!--打印-->
        <ledger-print-modal ref="ledgerPrintModal"/>
        <!--批量打印-->
        <ledger-batch-print-modal ref="ledgerBatchPrintModal" @handleChangeVisible="handleChangeVisible"/>
    </div>
</template>

<script>
import fileDownload from 'js-file-download'
import resultAcceptanceCheckModal from './modules/resultAcceptanceCheckModal'
// import addAcceptanceCheckModal from './modules/addAcceptanceCheckModal'
import LedgerPrintModal from "../equipmentsLedgerManagement/modules/ledgerPrintModal";
import LedgerBatchPrintModal from "../equipmentsLedgerManagement/modules/ledgerBatchPrintModal";
import recursion from "../../../util/recursion";
import {findOrgByToken} from "../../../api/index.js";

export default {
    name: "picking",
    components: {
        LedgerBatchPrintModal,
        LedgerPrintModal,
        resultAcceptanceCheckModal,
        // addAcceptanceCheckModal
    },
    data() {
        return {
            ids: '',
            personName: '',
            pageNum: 1,
            pageSize: 10,
            total: 0,
            searchParams: {},
            checkBtnPermission: {},
            tagList: [{id: '', name: this.$t('common.all')}],
            statusList: [
                {id: 0, name: this.$t('preliminary.ToBeConfirmed')},
                // {id: 1,name: '到位中'},
                {id: 2, name: this.$t('preliminary.Confirmed')}
            ],
            resultList: [{id: 0, name:  this.$t('preliminary.Waiting')}, {id: 1, name: this.$t('acceptanceCheck.AcceptancePassed')}, {id: 2, name: this.$t('acceptanceCheck.AcceptanceFailed')}],
            columns: [
                {
                    type: 'selection',
                    minWidth: 60,
                    align: 'center'
                },
                {
                  title: `${ this.$t('preliminary.PassStatus') }`,
                    slot: "arrivalStatus",
                    key: 'arrivalStatus',
                    align: 'center',
                    minWidth: 120
                },
                {
                  title: `${ this.$t('preliminary.ContractNumber') }`,
                    key: 'contractNo',
                    align: 'center',
                    minWidth: 150
                },
                {
                  title: `${ this.$t('preliminary.PurchasingOrderNumber') }`,
                    key: 'orderNo',
                    align: 'center',
                    minWidth: 120
                },
                {
                  title: `${ this.$t('preliminary.Entity') }`,
                    key: 'useCompanyName',
                    align: 'center',
                  minWidth: 150
                },
                {
                  title: `${ this.$t('preliminary.EquipmentName') }`,
                    key: 'deviceName',
                    align: 'center',
                    minWidth: 140
                },
                {
                  title: `${ this.$t('preliminary.Department') }`,
                    key: 'useDept',
                    align: 'center',
                    minWidth: 120
                },
                {
                  title: `${ this.$t('preliminary.Location') }`,
                    key: 'position4',
                    align: 'center',
                    minWidth: 160
                },
                {
                  title: `${ this.$t('preliminary.Manufacturer') }`,
                    key: 'manufacturer',
                    align: 'center',
                    minWidth: 240
                },
                {
                  title: `${ this.$t('preliminary.ConfirmingDate') }`,
                    key: 'arrivalAcceptDate',
                    align: 'center',
                    minWidth: 150
                },
                {
                  title: `${ this.$t('preliminary.ManufacturingDate') }`,
                    key: 'produceDate',
                    align: 'center',
                  minWidth: 150
                },
                {
                  title: `${ this.$t('preliminary.ManufacturingNumber') }`,
                    key: 'factoryNo',
                    align: 'center',
                  minWidth: 170
                },
                {
                    title: `${ this.$t('common.operation') }`,
                    slot: "action",
                    minWidth: 220,
                    align: "center",
                    fixed: 'right',
                }
            ],
            dataSource: [],
            pageSizeOption: [10, 20, 30, 40],
            dateTimeRange: [],
            orgList: []
        }
    },
    created() {
        // this.getCompanyList()
        this.changeNum()
        this.getOrgList()
    },
    mounted() {
        let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
        for (let item of itemList) {
            if (item.code == "dmsArrivalCheckList") {
                this.checkBtnPermission.dmsArrivalCheckList = true
            }
            if (item.code == "dmsArrivalCheckAddArrival") {
                this.checkBtnPermission.dmsArrivalCheckAddArrival = true
            }
            if (item.code == "dmsArrivalCheckAdd") {
                this.checkBtnPermission.dmsArrivalCheckAdd = true
            }
            if (item.code == "dmsDeviceGetDwysLater") {
                this.checkBtnPermission.dmsDeviceGetDwysLater = true
            }
            if (item.code == "dmsDeviceTzGetDevicePrint1") {
                this.checkBtnPermission.dmsDeviceTzGetDevicePrint1 = true
            }
            if (item.code == "dmsDeviceTzGetBatchDevicePrint1") {
                this.checkBtnPermission.dmsDeviceTzGetBatchDevicePrint1 = true
            }
            if (item.code == "dmsArrivalCheckExportArrivalCheck") {
                this.checkBtnPermission.dmsArrivalCheckExportArrivalCheck = true
            }
        }
    },
    methods: {
        handleCasChange(val, selectedData) {
            this.searchParams.orgId = val[val.length - 1]
            this.searchParams.orgName = selectedData[selectedData.length - 1].label
        },
        getOrgList() {
            let params = {
                level: 3
            }
            findOrgByToken(params).then(res => {
                if (res.code === 200) {
                    const obj = {
                        label: 'name',
                        value: 'id',
                        children: 'children'
                    }
                    this.orgList = recursion.convertTree(res.data, obj)
                    this.orgData = res.data;
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        /********************基础数据获取********************/
        //公司列表
        getCompanyList() {
            this.axios({
                method: 'get',
                url: '/basic/company/getCompanyListByUser',
                params: {}
            }).then(res => {
                
                if (res.code === 200) {
                    let arr = res.data.map(item => {
                        return {
                            ...item,
                            id: item.id.toString()
                        }
                    })
                    this.tagList = [...this.tagList, ...arr]
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        handleRangeChange(val) {
            this.searchParams.beginTime = val[0]
            this.searchParams.endTime = val[1]
        },
        //导出
        handleOutRecords() {
            let params = {};
            for (let key in this.searchParams) {
                if (key === 'orgId' && this.searchParams['orgId']) {
                    const arr = this.searchParams[key]
                    const {length, last = length - 1} = arr
                    this.$set(params, key, arr[last])
                } else {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
            }
            if (this.ids && this.ids.length) {
                params.dmsDeviceIdList = [...this.ids]
            }
            const filName = this.$t('acceptanceCheck.ConfirmationRecords')
            this.axios({
                method: 'post',
                url: '/dms/dmsArrivalCheck/export',
                responseType: 'blob',
                data: {
                    ...params
                }
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        sendClick(row) {
            // this.$refs.addAcceptanceModal.show(row, false)
            this.$router.push({
              path: '/devBasic/earlierStage/acceptanceCheckInput',
              query:{
                ...row
              }
            })
        },
        recallClick(record) {
            this.$refs.resultModal.show(record)
        },
        lockClick(row) {
            this.$router.push({
                path: '/devBasic/earlierStage/detailAcceptanceCheckModal',
                query: {
                    id: row.id,
                    arrivalStatus: row.arrivalStatus
                }
            })
        },
        //打印
        handlePrint(row) {
            this.$refs.ledgerPrintModal.show(row, 1)
        },
        //批量操作
        handleSelectionChange(selectionData) {
            console.log(selectionData)
            let arr = []
            selectionData.forEach(item => {
                arr.push(item.id)
            })
            this.ids = arr
        },
        //批量打印
        handleBatchPrint() {
            this.$refs.ledgerBatchPrintModal.show(this.ids, 1)
        },
        handleChangeVisible() {
            this.$refs.selection.selectAll(false);
        },
        handleFresh() {
            this.searchList()
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {//查询列表
            let params = {
                pageNo: this.pageNum,
                pageSize: this.pageSize,
            };
            for (let key in this.searchParams) {
                this.$set(params, key, this.searchParams[key])
            }
            // if(this.searchParams.status==3){
            //   params.status = 0
            // }
            // if(this.dateList[1]){
            //     params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
            //     params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
            // }
            this.axios({
                method: 'get',
                url: '/dms/dmsArrivalCheck/list',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //导出
        exportTemplateClick() {
            let params = {};
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            if (this.searchParams.status == 3) {
                params.status = 0
            }
            if (this.dateList[1]) {
                params.startTime = this.$moment(this.dateList[0]).format('YYYY-MM-DD');
                params.endTime = this.$moment(this.dateList[1]).format('YYYY-MM-DD');
            }
            const filName = this.$t('acceptanceCheck.receivingMaterial')
            this.axios({
                method: 'get',
                url: '/tms/tmApplyUse/exportApplyList',
                responseType: 'blob',
                params: params
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
    }
}
</script>

<style scoped lang="scss">
.picking {

    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;

        }
    }


}

.ivu-input-number {
    width: -webkit-fill-available;
}
</style>

<style lang="scss">

</style>
